/*
* @Description: 商品推荐 护肤专栏
* @Author: kanglin
* @Date: 2018-09-11 10:09:40
* @Copyright: Created by Panxsoft.
*/

<style lang="less" scoped rel="stylesheet/less" type="text/less">
  @import "~src/assets/css/common.less";

  .recommend {
    background: #f8f8f8;

    .positions {
      padding-top: 38 *@rem-per-px;
      padding-left: 30  *@rem-per-px;
      padding-right: 30  *@rem-per-px;
      background: #ffffff;
      overflow: hidden;
    }

    .positions__label {
      height: 28*@rem-per-px;
      font-size: 20*@rem-per-px;
      font-weight: 400;
      line-height: 29*@rem-per-px;
      color: rgba(153, 153, 153, 1);
    }

    .positions__wrap {
      display: -webkit-box;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 10 *@rem-per-px;
      margin-bottom: -10 *@rem-per-px;
      margin-top: 16 *@rem-per-px;
    }

    .positions__wrap__group {
      font-size: 0;
      white-space: nowrap;
    }

    .positions__wrap__group__option {
      display: inline-block;
      // width:140 *@rem-per-px;
      padding: 0 46*@rem-per-px;
      height: 48 *@rem-per-px;
      background: rgba(245, 245, 245, 1);
      border-radius: 24*@rem-per-px;
      line-height: 48 *@rem-per-px;
      color: rgba(153, 153, 153, 1);
      text-align: center;
      font-size: 24 *@rem-per-px;
      margin-right: 20 *@rem-per-px;
    }

    .positions__wrap__group__option-active {
      background: #FFAECC;
      color: #ffffff;
    }

    .section {
      // padding-top: 50 *@rem-per-px;
      padding-left: 30  *@rem-per-px;
      padding-right: 30  *@rem-per-px;
      background: #ffffff;
    }

    .advice {
      padding-bottom: 50 *@rem-per-px;
      padding-top: 50 *@rem-per-px;
    }

    .category {
      background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
      // padding-bottom: 24 *@rem-per-px;

    }

    .section__title {
      height: 42*@rem-per-px;
      font-size: 30*@rem-per-px;
      font-weight: bold;
      line-height: 42*@rem-per-px;
      color: rgba(65, 72, 83, 1);
    }

    .section__text {
      font-size: 20*@rem-per-px;
      font-weight: 400;
      line-height: 34*@rem-per-px;
      color: #414853;
      margin-top: 10*@rem-per-px;
      text-align: justify;
    }

    .section__categories {
      overflow-x: auto;
    }

    .section__categories__list {
      margin-top: 52  *@rem-per-px;
      white-space: nowrap;
    }

    .section__categories__list__item {
      display: inline-block;
      font-size: 0;
      margin-right: 40 *@rem-per-px;
      padding-bottom: 26 *@rem-per-px;
      position: relative;
    }

    .section__categories__list__item__pic {
      width: 98 *@rem-per-px;
      height: 98  *@rem-per-px;
      background: #F1F1F1;
      border-radius: 50%;

      & > img {
        width: 100%;
      }
    }

    .section__categories__list__item__text {
      height: 25 *@rem-per-px;
      font-size: 18 *@rem-per-px;
      font-weight: 400;
      line-height: 25 *@rem-per-px;
      color: #666666;
      text-align: center;
      margin-top: 18 *@rem-per-px;
    }

    .section__categories__list__item-active:after {
      content: ' ';
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 18*@rem-per-px;
      background-position: 50%;
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/2.3.9/tuijian_jiantou_img@2x.png');
    }

    .section__categories__list__item-active .section__categories__list__item__pic {
      background: #FFF2F7;
    }

    .section__categories__list__item-active .section__categories__list__item__text {
      color: #FFAECC;
    }

    .footer {
      height: 74*@rem-per-px;
      text-align: center;
      color: #E5E5E5;
      line-height: 74*@rem-per-px;
    }

    .section__text b {
      font-weight: bold !important;
    }

  }
</style>

<template>
  <div class="recommend">
    <back
      v-if="!$status.isWxBrowser()"
      :query="routerParams"
      :name="$t('home.skin_test_data')"
      path="/report" />
    <!-- BEGIN: 智能测肤 -->
    <div
      v-if="isTouchTest"
      class="positions">
      <p class="positions__label">{{ $t('report.position_options') }}</p>
      <div class="positions__wrap personal-scrollbar">
        <div class="positions__wrap__group">
          <a
            v-for="(item, index) in getTouchOptions"
            :key="index"
            :class="{'positions__wrap__group__option-active': index=== option_active_index}"
            class="positions__wrap__group__option"
            href="javascript:void(0)"
            @click="handleButtonClick(index, item)">
            {{ item.skin_name }}
          </a>
        </div>
      </div>
    </div>
    <!-- END: 智能测肤 -->

    <!-- BEGIN: 3D测肤 -->
    <div
      v-else
      class="positions">
      <p class="positions__label">{{ $t('report.exist_problem') }}</p>
      <div class="positions__wrap personal-scrollbar">
        <div class="positions__wrap__group">
          <a
            v-for="(item, index) in getImageOptions"
            :key="index"
            :class="{'positions__wrap__group__option-active': index=== option_active_index}"
            class="positions__wrap__group__option"
            href="javascript:void(0)"
            @click="handleButtonClick(index, item)">
            {{ item.levelname }}
          </a>
        </div>
      </div>
    </div>
    <!-- END: 3D测肤 -->

    <!-- 显示专家建议 -->
    <div class="section advice">
      <h2 class="section__title">{{ $t('report.expert_advice') }}</h2>
      <p
        v-for="(item, index) in suggest"
        :key="index"
        class="section__text">
        <b>{{ item.label }}</b> <span v-html="item.text" />
      </p>
    </div>

    <!-- 推荐产品列表 -->
    <div
      v-if="productGroups.length > 0"
      class="section category">
      <h2 class="section__title">{{ $t('report.recommend') }}</h2>
      <div class="section__categories">
        <ul class="section__categories__list">
          <li
            v-for="(item, index) in productGroups"
            :key="item.id"
            :class="{'section__categories__list__item-active': index===category_active_index}"
            class="section__categories__list__item"
            @click="selectCategory(index)">
            <div class="section__categories__list__item__pic">
              <img
                :src="item.icon"
                alt="">
            </div>
            <p class="section__categories__list__item__text">{{ item.category_name}}</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- begin: 商品组件 -->
    <ul>
      <product-item
        v-for="(item,index) in products"
        slot="content"
        :key="item.id"
        :product="item"
        :data-index="index" />
    </ul>
    <!-- end: 商品组件 -->

    <div
      v-if="products.length> 0"
      class="footer">
      {{ $t('report.no_more') }}
    </div>

  </div>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  // import animationLists from 'src/views/component/animation-lists';
  import Back from 'src/views/component/back'
  import productItem from 'src/views/component/product-item'

  export default {
    name: 'Recommend',
    components: {
      // animationLists,
      productItem,
      Back,
    },
    data() {
      return {
        option_active_index: 0,
        category_active_index: 0,
        test_type: '', // 检测类型
      }
    },
    computed: {
      ...mapGetters('report', [
        'getTouchOptions',
        'getTouchActiveOption',
        'getTouchProductGroups',

        'getImageOptions',
        'getImageActiveOption',
        'getImageProductGroups',
      ]),

      suggest() {
        if (this.isTouchTest) {
          if (this.getTouchOptions[this.option_active_index]
            && this.getTouchOptions[this.option_active_index].suggests) { // 智能测肤
            const attributes_name = [this.$t('report.water'), this.$t('report.oil'), this.$t('report.elastic')]
            return this.getTouchOptions[this.option_active_index].suggests
              .map((item, index) => ({
                label: `${attributes_name[index]}：`,
                text: item.suggest,
              }))
          }
        } else if (this.getImageOptions[this.option_active_index]) { // 3D测肤建议
          const {expert} = this.getImageOptions[this.option_active_index]
          return [{
            label: '',
            text: expert ? expert.replace(/\n/g, '<br/>') : '', // 正则匹配/n换行符，替换成br标签，确保可以换行
          }]
        }
        return [this.$t('common.none')]
      },

      productGroups() {
        if (this.isTouchTest) {
          return this.getTouchProductGroups
        }
        return this.getImageProductGroups
      },

      products() {
        if (this.isTouchTest) {
          if (this.getTouchProductGroups[this.category_active_index] && this.getTouchProductGroups[this.category_active_index].products) {
            return this.getTouchProductGroups[this.category_active_index].products
          }
        } else if (this.getImageProductGroups[this.category_active_index] && this.getImageProductGroups[this.category_active_index].products) {
          return this.getImageProductGroups[this.category_active_index].products
        }
        return []
      },

      /**
       * 智能测肤
       */
      isTouchTest() {
        return this.test_type === 'touch'
      },

      routerParams() {
        if (this.isTouchTest) {
          return {skin_detector_id: 3}
        }
        return {skin_detector_id: 2}
      },
    },
    created() {
      this.test_type = this.takeTestType(this.$route)
      this.checkStoreData(this.getImageOptions, this.getTouchOptions)
      this.option_active_index = this.resolveActiveIndex()
    },
    methods: {
      ...mapActions('report', [
        'fetchRecommendProductGroup',
      ]),

      ...mapMutations('report', ['saveGeneratedProductGroups']),

      /**
       *  错路由参数上读取页面来源 (测肤的类型)
       * @param {Object} route
       * @return {String} type;
       */
      takeTestType(route) {
        const {type} = route.query
        return type
      },

      /**
       * vuex 的参数
       *
       */
      checkStoreData(touchOptions, imageOptions) {
        if (touchOptions.length <= 0 && imageOptions.length <= 0) {
          this.backToReport()
        }
      },

      /**
       *  返回报告页面
       *  @return {undefined}
       */
      backToReport() {
        this.$router.replace({path: '/report', query: this.routerParams})
      },

      /**
       * 解析当前激活的index值
       */
      resolveActiveIndex() {
        let option_active_index = 0
        this.getTouchOptions.forEach((option, index) => {
          if (this.getTouchActiveOption.id === option.id) {
            option_active_index = index
          }
        })
        return option_active_index
      },

      /**
       * 处理Button选项的回调
       */
      handleButtonClick(index, active_option) {
        this.option_active_index = index
        this.refreshProductGroup(active_option.id, active_option.skin_record_id)
        this.category_active_index = 0 // 重置分类
      },

      /**
       * 选择商品分类
       */
      selectCategory(index) {
        this.category_active_index = index
      },

      /**
       * 刷新商品数据
       */
      refreshProductGroup(type_skin_record_id, skin_record_id) {
        this.fetchRecommendProductGroup({type_skin_record_id, skin_record_id})
          .then((product_groups) => {
            const type = this.isTouchTest ? 'touch' : 'image'
            this.saveGeneratedProductGroups({
              type, product_groups,
            })
          })
      },
    },
  }
</script>
